{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
    <link rel="stylesheet" href="{% static 'css/search.css' %}">
    <script src="{% static 'js/jquery-3.4.1.min.js' %}"></script>
    <script src="{% static 'js/bootstrap.min.js' %}"></script>
    <style>
          .D_line{
    margin-top: 100px;
    height: 50px;
    width: 100%;
    background-color: #01A9DC;


}
        .copy{
    text-align: center;
    font-size: 14px;
            line-height: 25px;
            font-weight: 700;
}
        {#.active{background:#D96C00; font-weight:bold;}#}
    </style>
</head>
<body>
    <header class="container-fluid">
        <img src="{% static 'images/logo.png' %}" alt="PPCsPG" class="img-responsive" id="img">
        <div class="row">
            <nav class="navbar navbar-inverse" id="nav">
                <div class="container-fluid">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                       <a class="navbar-brand" href="/">PPCsPG</a>

                    </div>

                    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                        <ul class="nav  navbar-right navbar-nav" id="nav">
                            <li class="active"><a href="/" >Home </a></li>
                            <li ><a href="{% url 'browse' %}">Browse</a></li>
                            <li><a href="{% url 'search' %}">Search</a></li>
                            <li><a href="https://www.genome.jp/tools/blast/">Blast</a></li>
                            <li><a href="{% url 'peptide.peptide' %}">Prediction</a></li>
                            <li><a href="{% url 'download' %}">Download</a></li>
                            <li><a href="{% url 'help' %}">Help</a></li>
                      </ul>
                    </div>
                </div>
            </nav>
        </div>
    </header>
    <div class="container-fluid content">
        <img src="{% static 'images/search.png' %}" alt="" class="pic" >
        <div>
            <form action="{% url 'result' %}" method="get" class="form" style="margin: 25px 400px">
                <table >
                <tr>
                    <td>Species:</td>
                    <td> <input type="text"  required="required" name="specie" autocomplete="off"  placeholder="Please input the keyword" style="width: 300px;font-size: 16px"> <br/></td>
                </tr>
                <tr>
                    <td>Type:</td>
                    <td>
                         <select name="type" id="" class="type">
                            <option value="all" >all</option>
                            <option value="chromosome">chromosome</option>
                            <option value="plasmid">plasmid</option>
                        </select>
                    </td>
                </tr>
{#                <tr>#}
{#                    <td>Length:</td>#}
{#                    <td>#}
{#                        <select name="length" id="" class="id">#}
{#                            <option value="all" >all</option>#}
{#                            <option value="1~119" >1~119</option>#}
{#                            <option value="120~229" >120~229</option>#}
{#                            <option value="229~330" >229~330</option>#}
{#                        </select>#}
{#                    </td>#}
{#                </tr>#}
{#                <tr>#}
{#                    <td>GC%:</td>#}
{#                    <td>#}
{#                        <select name="GC" id="" class="'gc">#}
{#                            <option value="all">all</option>#}
{#                            <option value="0~49">0~49</option>#}
{#                            <option value="50~69">50~69</option>#}
{#                            <option value="70~89">70~89</option>#}
{#                            <option value="80~99">80~99</option>#}
{#                        </select>#}
{#                    </td>#}
{#                </tr>#}

{#                <tr>#}
{#                    <td>Length:</td>#}
{#                    <td width="20%"><input type="text"  name="start" autocomplete="off" autofocus="autofocus" oninput="if(value.length>3)value=value.slice(0,3)" onkeypress=" return event.keyCode>=48&&event.keyCode<=57"#}
{#                    style="width: 50px"></td>#}
{##}
{#                    <td width="20%"><input type="text"  name="end" autocomplete="off" autofocus="autofocus"  oninput="if(value.length>3)value=value.slice(0,3)" onkeypress=" return event.keyCode>=48&&event.keyCode<=57"#}
{#                    style="width: 50px"></td>#}
{#                    <td>start:<input type="text" style="display: inline-block; ">end:<input type="text" style="display: inline-block"></td>#}
{#                </tr>#}
{#                <tr>#}
{#                    <td>GC%:</td>#}
{#                    <td><input type="text"  name="begin" autocomplete="off" autofocus="autofocus" oninput="if(value.length>3)value=value.slice(0,3)" onkeypress=" return event.keyCode>=48&&event.keyCode<=57"></td>#}
{#                    <td><input type="text"  name="stop" autocomplete="off" autofocus="autofocus" oninput="if(value.length>3)value=value.slice(0,3)" onkeypress=" return event.keyCode>=48&&event.keyCode<=57"></td>#}
{#                </tr>#}
{#                <tr>#}
{#                    <td></td>#}
{#                    <td><input type="submit" value="Search" class="search"></td>#}
{#                </tr>#}
{#            </table>#}
            </table>
                <div>
                    <span style="font-size: 20px;margin-right: 6px">Length:</span>
                    <input type="text" required="required"  autocomplete="off" style="font-size:16px;width: 40px;height:24px;text-align:center;border: #808080 1px solid;" placeholder="start" name="start" onkeyup="javascript:this.value=this.value.replace(/[^\d]/g,'');if(this.value<0){
this.value=0;};if(this.value>183){this.value=183;}" onchange="javascript:this.value=this.value.replace(/[^\d]/g,'');if(this.value<0){
this.value=0;};if(this.value>183){this.value=183;}"><strong>-</strong>
                    <input type="text"  required="required" autocomplete="off" style="font-size:16px;width: 40px;height:24px;text-align:center;border: #808080 1px solid;" placeholder="end" name="end" onkeyup="javascript:this.value=this.value.replace(/[^\d]/g,'');if(this.value<0){
this.value=0;};if(this.value>183){this.value=183;}" onchange="javascript:this.value=this.value.replace(/[^\d]/g,'');if(this.value<0){
this.value=0;};if(this.value>183){this.value=183;}">
                </div>
                 <div>
                    <span style="font-size: 20px;margin-right: 18px">GC%:</span>
                    <input type="text" required="required" autocomplete="off" style="font-size:16px;width: 40px;height:24px;text-align:center;border: #808080 1px solid;" placeholder="start" name="begin" onkeyup="javascript:this.value=this.value.replace(/[^\d]/g,'');if(this.value<0){
this.value=0;};if(this.value>100){this.value=100;}" onchange="javascript:this.value=this.value.replace(/[^\d]/g,'');if(this.value<0){
this.value=0;};if(this.value>100){this.value=100;}"  ><strong>-</strong>
                    <input type="text" required="required" autocomplete="off" style="font-size:16px;width: 40px;height:24px;text-align:center;border: #808080 1px solid;" placeholder="end" name="stop" onkeyup="javascript:this.value=this.value.replace(/[^\d]/g,'');if(this.value<0){
this.value=0;};if(this.value>100){this.value=100;}" onchange="javascript:this.value=this.value.replace(/[^\d]/g,'');if(this.value<0){
this.value=0;};if(this.value>100){this.value=100;}">
                </div>
                <div style="margin-top: 10px ;width: 600px;">
                    <strong style="font-size: 18px">Example:</strong><span style="font-size: 16px;">Species:coli&nbsp&nbspType:chromosome&nbsp&nbspLength:30-60&nbsp&nbspGC%:30-40</span>
                </div>
{#                <input type="submit" class="search" value="Search" style="width: 65px;font-size: 18px;margin-left: 76px;margin-top: 4px; color:white;background-color: #cc82ff; border: #808080 1px solid;border-radius: 5px;">#}
                 <button type="submit" class="search" value="Search" style="width: 65px;font-size: 18px;margin-left: 76px;margin-top: 4px; color:white;background-color: #cc82ff; border: #808080 1px solid;border-radius: 5px;">Search</button>
            </form>
         
    </div>
    </div>

             <div class="D_line"> <p class="copy">Copyright@ 山东省生物物理重点实验室  联系电话：0534-8985884   邮箱：swwlzdsys@163.com
<br />实验室地址:山东省德州市德城区大学西路566号 邮政编码:253023</p></div>


</body>
</html>